<template>
  <div>
    <div class="page_top">
      <div
          class="left_btn"
          @click="back"
      >
        <img
            src="../../../assets/image/back.png"
            alt=""
        />
      </div>
      <Crumbs
          basetitle="工具"
          title="电子签数据"
      ></Crumbs>
    </div>
    <div class="content">
      <div class="msgbox">
        <div class="top">
          电子签数据
        </div>
        <div class="content">
          <div class="text">
            <div class="t">总签署份数</div>
            <div class="b">{{ eledatainfo.sign ? eledatainfo.sign : '--' }}<span class="gray">/份</span></div>
          </div>
          <div class="line"></div>
          <div class="text">
            <div class="t">待签署份数</div>
            <div class="b">{{ eledatainfo.notSign ? eledatainfo.notSign : '--' }}<span class="gray">/份</span></div>
          </div>
          <div class="line"></div>
          <div class="text">
            <div class="t">签署失败份数</div>
            <div class="b">{{ eledatainfo.signingFailed ? eledatainfo.signingFailed : '--' }}<span
                class="gray">/份</span></div>
          </div>
          <div class="line"></div>
          <div class="text">
            <div class="t">剩余份数</div>
            <div class="b">{{ eledatainfo.surplus ? eledatainfo.surplus : '--' }}<span class="gray">/份</span></div>
          </div>
          <div class="line"></div>
          <div class="text">
            <div class="t">总充值份数</div>
            <div class="b">{{ eledatainfo.rechargeCount ? eledatainfo.rechargeCount : '--' }}<span
                class="gray">/份</span></div>
          </div>
          <div class="line"></div>
          <div class="text">
            <div class="t">总提现份数</div>
            <div class="b">{{ eledatainfo.withdrawCount ? eledatainfo.withdrawCount : '--' }}<span
                class="gray">/份</span></div>
          </div>
        </div>
      </div>
      <FilterComponent v-model:filter-data="filterData" hideHead @doSearch="handleSearch"/>
      <div class="padding">
        <el-table :data="elelist" style="width: 100%" height="500"
                  :header-cell-style="{background: '#FAFAFC', color: '#202536'}">
          <el-table-column prop="companyName" min-width="200" label="公司名称"/>
          <el-table-column prop="payMoney" label="支付金额" align="center">
            <template #default="scope">
              <div class="orign" v-if="scope.row.payMoney">{{ scope.row.payMoney ? scope.row.payMoney : '--' }}</div>
              <div v-else>{{ scope.row.payMoney ? scope.row.payMoney : '--' }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="150" prop="amount" label="充值/消费数量" align="center">
            <template #default="scope">
              <div v-if="scope.row.operateType===0">-{{ scope.row.amount }}</div>
              <div v-if="scope.row.operateType===1">+{{ scope.row.amount }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="100" prop="unitPrice" label="单价" align="center">
            <template #default="scope">
              <div v-if="scope.row.unitPrice">{{ scope.row.unitPrice ? scope.row.unitPrice : '--' }}</div>
              <div v-else>{{ scope.row.unitPrice ? scope.row.unitPrice : '--' }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="100" prop="operateType" label="操作类型" align="center">
            <template #default="scope">
              <div v-if="scope.row.operateType===0">消费</div>
              <div v-if="scope.row.operateType===1">充值</div>
            </template>
          </el-table-column>
          <el-table-column min-width="100" prop="voucherUrl" label="充值凭证" align="center">
            <template #default="scope">
              <BigPicture v-if="scope.row.voucherUrl" text="查看凭证" align="center" :imageUrl="scope.row.voucherUrl"/>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column min-width="150" prop="createTime" label="日期">
          </el-table-column>
          <el-table-column min-width="180" prop="deadline" label="操作">
            <template #default="scope">
              <div v-if="scope.row.voucherUrl" class="pointer blue" @click="downloadpz(scope.row.voucherUrl)">下载凭证
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="eletotal" :currentPage="elepagenum" :pageSize="elepagesize"
                    @SizeChange="changeelepagesize" @CurrentChange="changeelepagenum"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onActivated, onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import Pagination from '../../../components/pagination.vue'
import FilterComponent from '../../../components/filterComponent/index.vue'
import Crumbs from '../../../components/crumbs.vue'
import {exportczxfjlapi, getqueryaccountrecordapi, getqueryeledataapi} from '../../../api/electronicVisa/electronicVisa'
import BigPicture from '../../../components/bigPicture/index.vue'
import {downloadFile} from 'image-conversion'
import {ElMessage} from 'element-plus'
import baseurl from '../../../api/env'
const exportczxfjlfn = ()=>{
  exportczxfjlapi({
    companyName: filterData.value.list.companyName.value,
    operateType: filterData.value.list.operateType.value,
  }).then((res:any)=>{
    ElMessage({
      message: '导出成功',
      type: 'success',
    })
    window.location.href =
        baseurl + '/common/download?delete=true&fileName=' + res
  })
}
const elelist = ref<any>([])
const downloadpz = (val: any) => {
  window.open(val)
}
const getqueryaccountrecord = () => {
  getqueryaccountrecordapi({
    companyName: filterData.value.list.companyName.value,
    operateType: filterData.value.list.operateType.value,
    pageSize: elepagesize.value,
    pageNum: elepagenum.value
  }).then((res: any) => {
    console.log(res, '电子签列表')
    elelist.value = res.list
    eletotal.value = res.totalCount
  })
}
const eletotal = ref(0)
const elepagesize = ref(10)
const elepagenum = ref(1)
const changeelepagesize = (val: any) => {
  elepagesize.value = val
  elepagenum.value = 1
  getqueryaccountrecord()
}
const changeelepagenum = (val: any) => {
  elepagenum.value = val
  getqueryaccountrecord()
}
onMounted(() => {
  getqueryeledatafn()
  getqueryaccountrecord()
})
onActivated(() => {
  getqueryeledatafn()
  getqueryaccountrecord()
})
const eledatainfo = ref<any>({})
const getqueryeledatafn = () => {
  getqueryeledataapi().then((res: any) => {
    console.log(res, '电子签数据')
    eledatainfo.value = res
  })
}
const back = () => {
  window.history.back()
}
const router = useRouter()
const filterData = ref<any>({
  list: {
    companyName: {
      name: '公司名称',
      prop: 'companyName',
      value: '',
      placeholder: '请输入公司名称',
      type: 'input',
      inputType: 'text'
    },
    operateType: {
      name: '操作状态',
      prop: 'operateType',
      value: '',
      placeholder: '请选择操作状态',
      type: 'select',
      options: [{
        label: '消费',
        value: '0',
      }, {
        label: '充值',
        value: '1',
      }]
    }
  },
  buttonList: [
    {
      icon: 'Download',
      name: '导出列表',
      click: () => {
        exportczxfjlfn()
      }
    }
  ]
})
const exportfn = () => {
  console.log(111)
}
const handleSearch = () => {
  getqueryaccountrecord()
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
}

.msgbox {
  background-color: #ffffff;
  margin-bottom: 16px;
  border-right: 8px;

  .top {
    padding: 16px;
    color: #3D3D3D;
    font-size: 14px;
    border-bottom: 1px solid #F4F4F7;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;

    .line {
      width: 1px;
      background-color: #F4F4F7;
      height: 50px;
    }

    .text {
      .t {
        color: #9497B1;
        font-size: 12px;
      }

      .b {
        color: #3D3D3D;
        font-size: 22px;
        margin-top: 8px;
        font-weight: 700;
      }

      .gray {
        font-weight: normal;
        color: #9497B1;
        font-size: 12px;
      }
    }
  }
}

.padding {
  background-color: #FFFFFF;
  padding: 0 10px 10px;
}

.orign {
  color: #FF7642;
}

.pointer {
  cursor: pointer;
}

.blue {
  color: #3E5FF5;
}
</style>
